<template>
	<div class="check_word" id="check_word" v-if="check_status">
		<div class="word_detail">
			<button class="hide_word" v-on:click="hideword()">X</button>
			<div class="img_note">
				<img :src="wordInfo.img" />
			</div>
			<div class="detail_note">
				<p>{{wordInfo.word}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'check_word',
		computed: {},
		data() {
			return {
				check_status: false,
				wordInfo:{
					img:'',
					word:''
				}
			}
		}, //定义变量
		components: {}, //注册组件
		methods: { //方法都在这里
			showword:function(id){
				var wordInd={
					key:id
				}
				var that = this;
				this.lh_http('post', "tbWords/get.do",wordInd).done(function(res) {
					if(res.status) {
//						console.log(res)
						var infoList=res.data.tbWords
						that.wordInfo.img=infoList.img
						that.wordInfo.word=infoList.word
					} else {
						alert(res.data);
					}
				})
				this.check_status = true;
			},
			hideword:function(){
				this.check_status=false;
			}
		},
		mounted() {
			var that = this;
			//获取banner
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.check_word {
		width:100%;
		height:100%;
		background:rgba(0,0,0,0.4);
		position: fixed;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		.word_detail{
			width:500px;
			height:500px;
			background:#fff;
			position:absolute;
			top:50%;
			left:50%;
			margin-left:-250px;
			margin-top:-250px;
			border-radius:8px;
			.hide_word{
				position:absolute;
				top:10px;
				right:20px;
				width:40px;
				height:40px;
				line-height: 40px;
				background:#fff;
				cursor: pointer;
			}
			.img_note{
				width:250px;
				margin:40px auto;
				img{
					width:100%;
					display: block;
				}
			}
			.detail_note{
				padding:20px 30px 0;
			}
		}
	}
</style>